<div id="profile-field-settings" class="settings-section" data-name="profile-field-settings">
    <h3 class="inline-block">{{t "Custom profile fields" }}</h3>
    <div class="alert-notification" id="admin-profile-field-status"></div>
    <div class="admin-table-wrapper">
        <table class="table table-condensed table-striped admin_profile_fields_table">
            <tbody id="admin_profile_fields_table">
                <th>{{t "Label" }}</th>
                <th>{{t "Hint" }}</th>
                <th>{{t "Type" }}</th>
                {{#if is_admin}}
                <th class="actions">{{t "Actions" }}</th>
                {{/if}}
            </tbody>
        </table>
    </div>
    {{#if is_admin}}
    <form class="form-horizontal admin-profile-field-form">
        <div class="add-new-profile-field-box grey-box">
            <div class="new-profile-field-form wrapper">
                <div class="settings-section-title new-profile-field-section-title inline-block">{{t "Add a new profile field" }}</div>
                <div class="alert-notification" id="admin-add-profile-field-status"></div>
                <div class="control-group">
                    <label for="profile_field_type" class="control-label">{{t "Type" }}</label>
                    <select id="profile_field_type" name="field_type">
                        {{#each custom_profile_field_types}}
                            <option value='{{this.id}}'>{{this.name}}</option>
                        {{/each}}
                    </select>
                </div>
                <div class="control-group" id="profile_field_external_accounts">
                    <label for="profile_field_external_accounts_type" class="control-label">{{t "External account type" }}</label>
                    <select id="profile_field_external_accounts_type" name="external_acc_field_type">
                        {{#each realm_default_external_accounts}}
                            <option value='{{@key}}'>{{this.text}}</option>
                        {{/each}}
                        <option value="custom">{{t 'Custom' }}</option>
                    </select>
                </div>
                <div class="control-group">
                    <label for="profile_field_name" class="control-label">{{t "Label" }}</label>
                    <input type="text" id="profile_field_name" name="name" autocomplete="off" maxlength="40" />
                </div>
                <div class="control-group">
                    <label for="profile_field_hint" class="control-label">{{t "Hint (up to 80 characters)" }}</label>
                    <input type="text" id="profile_field_hint" name="hint" autocomplete="off" maxlength="80" />
                    <div class="alert" id="admin-profile-field-hint-status"></div>
                </div>
                <div class="control-group" id="profile_field_choices_row">
                    <label for="profile_field_choices" class="control-label">{{t "Field choices" }}</label>
                    <table class="profile_field_choices_table">
                        <tbody id="profile_field_choices" class="profile-field-choices"></tbody>
                    </table>
                </div>
                <div class="control-group" id="custom_external_account_url_pattern">
                    <label for="custom_field_url_pattern" class="control-label">{{t "URL pattern" }}</label>
                    <input type="url" id="custom_field_url_pattern" name="url_pattern" autocomplete="off" maxlength="1024" placeholder="https://example.com/path/%(username)s"/>
                </div>
                <button type="submit" class="button rounded sea-green" id="add-custom-profile-field-btn">
                    {{t 'Add profile field' }}
                </button>
            </div>
        </div>
    </form>
    {{/if}}
</div>
